<template>
	<view class="main">	
		<view class="top">
			<image src="../../static/homeBG.png" mode="aspectFill"></image>
		</view>
		<view class="flex margin-sm margin-top-set">
			
				<view @tap="toPage(pageName[0])" class="flex-sub bg-white padding-top-lg margin-xs text-center home-item">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/cs/lesson.png" mode="aspectFill"></image>
					<view class="padding">计算机专业相关</view>
				</view>
				<view @tap="toPage(pageName[1])" class="flex-sub bg-white padding-top-lg margin-xs text-center home-item">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/web/web_base.png" mode="aspectFill"></image>
					<view class="padding">前端学习</view>
				</view>

		</view>	
	</view>
</template>

<script>
	export default {
		data() {
		return {
				pageName: ['computer','web'],
				modalName: null,
				loading: false,
			    skeleton1 : {
					avatarSize: '52px',
					row: 3,
					showTitle: true,
			    }
			}
		},
		created() {
			this.reloadData()
		},
		methods: {
			reloadData() {
				this.loading = true
				setTimeout(() => {
					this.loading = false
				}, 1000)
			},
			toPage(pageName) {
				console.log(pageName)
				uni.navigateTo({
				    url: `../home/${ pageName }`
				});
			}
		}
	}
</script>

<style>
	.main {
		height: 100vh;
		background-color: #FFFFFF;
	}
	.top{
		position: absolute;
		width: 100%;
		top: 0;
		background-color: #FFFFFF;
		z-index: -1;
	}
	.margin-top-set{
		margin-top: 200px;
	}
	.home-item {
		border-radius: 16px;
		box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
	}
	.flex-sub image {
		width: 40vw;
		height: 25vw;
	}
	.top image {
		width: 100%;
	}
</style>
